<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>大数据加载</title>
        <script
            type="text/javascript"
            src="../docs-1.2.6/js/jquery-1.8.0.min.js"
        ></script>
        <script
            type="text/javascript"
            src="../docs-1.2.6/js/template.min.js"
        ></script>
        <script
            type="text/javascript"
            src="../docs-1.2.6/js/extgrid/jquery.extGrid.js"
        ></script>
        <script
            type="text/javascript"
            src="../docs-1.2.6/js/extgrid/jquery.extGrid.responsive.js"
        ></script>

        <link
            rel="stylesheet"
            type="text/css"
            href="../docs-1.2.6/js/extgrid/themes/default/skin.css"
        />
    </head>
    <body>
        <h4>大数据加载</h4>
        <div style="width:100%; height:400px;" id="extgrid"></div>
        <script type="text/javascript">
            var getData = function() {
                var len = 500000;
                var data = [];
                for (var i = 0; i < len; i++) {
                    data.push({
                        id: i + 1,
                        username: "张三" + i,
                        alias: "小明",
                        gender: "男",
                        age: i % 90,
                        birthday: "2012-08-09",
                        tel: 13124587451,
                        country: "地球",
                        address: "地球村",
                        qq: 123456,
                        hobby: "随便"
                    });
                }
                return data;
            };
            var columns = [
                { field: "username", title: "用户名", width: "100" },
                { field: "alias", title: "别名", width: "100" },
                { field: "gender", title: "性别", width: "50" },
                { field: "age", title: "年龄", width: "50" },
                { field: "birthday", title: "生日", width: "90" },
                {
                    field: "tel",
                    title: "联系电话",
                    width: "90",
                    align: "center"
                },
                {
                    field: "country",
                    title: "国家",
                    width: "90",
                    align: "center"
                },
                {
                    field: "address",
                    title: "家住地址",
                    width: "180",
                    align: "center"
                },
                { field: "qq", title: "QQ", width: "90", align: "center" },
                { field: "hobby", title: "爱好", width: "90", align: "center" }
            ];
            var datas = getData();
            $(function() {
                $("#extgrid").extgrid({
                    columns: columns,
                    rowNumbersWidth: 40,
                    checkBox: true,
                    pageSize: 999999,
                    minWidth: 450,
                    lazyLoadRow: true,
                    data: datas,
                    forceFit: true,
                    onFinish: function() {
                        var self = this;
                        $(window).resize(function(e) {
                            self.resize();
                        });
                    }
                });
            });
        </script>
    </body>
</html>
